<template>
  <div class="">
    <!-- <el-carousel :interval="5000" arrow="always" height="700px">
      <el-carousel-item v-for="(item,index) in imgUrlList" :key="index">
        <div class="img-box">
          <img :src="item.url" alt="房子图片" class="img">
        </div>
      </el-carousel-item>
    </el-carousel> -->
    <!-- swiper轮播图 -->
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <!-- <div class="swiper-slide">
          <img src="../assets/yuner.jpg" alt="" />
        </div> -->
        <div class="swiper-slide">
          <!-- <video src="@/assets/2.mp4" muted controls autoplay="autoplay" style="width: 100%"></video> -->
          <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpicnew13.photophoto.cn%2F20181121%2Fgaoduandaqibieshufangdichanbeijing-32379412_1.jpg&refer=http%3A%2F%2Fpicnew13.photophoto.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673576859&t=54c77c7024f2a1d4c7a43cd42b3a6e2f" alt="">
        </div>
        <div class="swiper-slide">
          <!-- <video src="@/assets/6.mp4" muted controls autoplay="autoplay" style="width: 100%"></video> -->
          <img src="https://img1.baidu.com/it/u=3694135294,1707432939&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="">
        </div>
        <div class="swiper-slide">
          <!-- <video src="@/assets/7.mp4" muted controls autoplay="autoplay" style="width: 100%"></video> -->
          <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.0351fdc.com%3A99%2Fupfile%2F201905%2F30114153770.png&refer=http%3A%2F%2Fwww.0351fdc.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673576859&t=25d693cb4a570eed9142b45c46a29f36" alt="">
        </div>
      </div>
      <!-- 标记页数 -->
      <div class="swiper-pagination"></div>
      <!-- 箭头 -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
    </div>
    <!-- 搜索区 -->
    <div class="search-box">
      <div class="search-alt">搜索</div>
      <el-input placeholder="请输入内容" v-model.trim="title_contains" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" @click="searchBut"></el-button>
      </el-input>
    </div>
    <FooterIndex />
  </div>
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
export default {
  name: 'HomeIndex',
  data() {
    return {
      imgUrlList: [{ url: require('../../assets/common/房子1.webp') }, { url: require('../../assets/common/房子2.webp') }, { url: require('../../assets/common/房子3.webp') }], // 保存图片路径
      title_contains: '' // 保存搜索内容
    }
  },
  methods: {
    // 点击搜索
    searchBut() {
      if (this.title_contains) {
        this.$router.push({
          path: `/property/${this.title_contains}/''/''`
        })
      }
    }
  },
  mounted() {
    // eslint-disable-next-line no-new
    new Swiper('.swiper-container', {
      autoplay: {
        delay: 10000 // 1秒切换一次
      },
      loop: true, // 循环模式选项
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination'
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      },
      // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar'
      }
    })
  }
}
</script>

<style lang="scss" scoped>
// 轮播图样式
html,
body {
  position: relative;
  height: 100%;
}
body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}
// 修改轮播图宽高
.swiper-container {
  width: 100%;
  height: 44.5vw;
  // height: 850px;
  .swiper-slide {
    // 图片自适应铺满
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
}
// 花瓣
.is-animating {
  z-index: 0;
}
.img-box {
  width: 100%;
  height: 100%;
  position: relative;
  .img {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.search-box {
  position: absolute;
  left: 500px;
  top: 250px;
  z-index: 4;
  .search-alt {
    width: 70px;
    height: 40px;
    border-radius: 2px;
    background-color: #ededed;
    text-align: center;
    line-height: 40px;
  }
  .input-with-select {
    width: 500px;
    // height: 25px;
    outline: none;
  }
}
</style>
